<template>
  <el-form-item label="边框" class="border-config-container">
    <div class="border-container">
      <!-- 图标区域 -->
      <div class="border-icon-container">
        <!-- 上边框 -->
        <div class="top-icon-container">
          <div class="icon-container" @click="handleBorderConfigChange('top')">
            <template v-if="activeConfigType === 'top'">
              <img src="../../../../../../../assets/images/border/borderTopActive.svg" alt="" title="上边框"/>
            </template>
            <template v-else>
              <img src="../../../../../../../assets/images/border/borderTop.svg" alt="" title="上边框"/>
            </template>
          </div>
        </div>
        <!-- 上边框结束 -->

        <!-- 左、全部和右边框 -->
        <div class="center-icon-container">
          <div class="icon-container" @click="handleBorderConfigChange('left')">
            <template v-if="activeConfigType === 'left'">
              <img src="../../../../../../../assets/images/border/borderLeftActive.svg" alt="" title="左边框"/>
            </template>
            <template v-else>
              <img src="../../../../../../../assets/images/border/borderLeft.svg" alt="" title="左边框"/>
            </template>
          </div>
          <div class="icon-container" @click="handleBorderConfigChange('all')">
            <template v-if="activeConfigType === 'all'">
              <img src="../../../../../../../assets/images/border/borderAllActive.svg" alt="" title="全部边框"/>
            </template>
            <template v-else>
              <img src="../../../../../../../assets/images/border/borderAll.svg" alt="" title="全部边框"/>
            </template>
          </div>
          <div class="icon-container" @click="handleBorderConfigChange('right')">
            <template v-if="activeConfigType === 'right'">
              <img src="../../../../../../../assets/images/border/borderRightActive.svg" alt="" title="右边框"/>
            </template>
            <template v-else>
              <img src="../../../../../../../assets/images/border/borderRight.svg" alt="" title="右边框"/>
            </template>
          </div>
        </div>
        <!-- 左、全部和右边框结束 -->

        <!-- 下边框 -->
        <div class="bottom-icon-container">
          <div class="icon-container" @click="handleBorderConfigChange('bottom')">
            <template v-if="activeConfigType === 'bottom'">
              <img src="../../../../../../../assets/images/border/borderBottomActive.svg" alt="" title="下边框"/>
            </template>
            <template v-else>
              <img src="../../../../../../../assets/images/border/borderBottom.svg" alt="" title="下边框"/>
            </template>
          </div>
        </div>
        <!-- 下边框结束 -->
      </div>
      <!-- 图标区域结束 -->

      <!-- 操作区域 -->
      <div class="border-right-container" v-if="value">
        <el-input v-model="value[activeConfigName].borderWidth" placeholder="边框宽度" type="number" size="small"
                  class="border-width">
          <template #append>px</template>
        </el-input>
        <div class="border-color-wrapper">
          <el-input v-model="value[activeConfigName].borderColor" placeholder="边框颜色" size="small"
                    class="border-width border-color">
            <template #append>
              <el-color-picker
                size="small"
                v-model="value[activeConfigName].borderColor"
                :predefine="predefineColors">
              </el-color-picker>
            </template>
          </el-input>
        </div>
        <el-select v-model="value[activeConfigName].borderType" size="small" clearable filterable placeholder="边框类型"
                   class="border-width">
          <el-option label="solid" value="solid"></el-option>
          <el-option label="dashed" value="dashed"></el-option>
          <el-option label="dotted" value="dotted"></el-option>
        </el-select>
      </div>
      <!-- 操作区域结束 -->
    </div>
  </el-form-item>
</template>

<script>
import {deepClone} from "@/utils/util";

export default {
  name: "borderConfig",
  props: {
    value: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        if (!val) {
          this.$emit("update:value", deepClone(this.initConfig))
          this.$nextTick(() => {
            this.$forceUpdate();
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      activeConfigType: 'all', // 选中的边框类型
      activeConfigName: 'borderAllConfig', // 选中的边框key值
      predefineColors: [
        '#ff0000',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#c7158577'
      ],
      initConfig: {
        borderAllConfig: {
          type: "all",
          borderWidth: '',
          borderColor: "#ff0000",
          borderType: ""
        },
        borderTopConfig: {
          type: "top",
          borderWidth: '',
          borderColor: "#ff0000",
          borderType: ""
        },
        borderRightConfig: {
          type: "right",
          borderWidth: '',
          borderColor: "#ff0000",
          borderType: ""
        },
        borderBottomConfig: {
          type: "bottom",
          borderWidth: '',
          borderColor: "#ff0000",
          borderType: ""
        },
        borderLeftConfig: {
          type: "left",
          borderWidth: '',
          borderColor: "#ff0000",
          borderType: ""
        }
      }
    }
  },
  methods: {
    handleBorderConfigChange(type) {
      this.activeConfigType = type;
      switch (type) {
        case "all":
          this.activeConfigName = 'borderAllConfig';
          break;
        case "top":
          this.activeConfigName = 'borderTopConfig';
          break;
        case "right":
          this.activeConfigName = 'borderRightConfig';
          break;
        case "bottom":
          this.activeConfigName = 'borderBottomConfig';
          break;
        case "left":
          this.activeConfigName = 'borderLeftConfig';
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">

.border-config-container {

  &:deep(.el-form-item__content)  {
    line-height: unset !important;
  }
}

.border-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  justify-content: space-between;

  .icon-container {
    display: inline-block;
    cursor: pointer;
  }

  .border-icon-container {
    position: relative;
    left: -24px;
    .top-icon-container {
      margin-left: 20px;
    }

    .center-icon-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .bottom-icon-container {
      margin-left: 20px;
    }
  }

  .border-right-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100px;
    height: 104px;
    position: relative;
    left: -20px;

    &:deep(.border-width)  {
      .el-input__inner {
        padding-right: 0 !important;
        padding-left: 4px !important;
      }

      .el-input-group__append {
        padding: 0  !important;
        .el-color-picker--mini {
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;

          .el-color-picker__icon {
            line-height: 1px;
          }

          .el-color-picker__trigger {
            height: 23px;
            padding: 2px;
          }
        }
      }
    }

    &:deep(.border-color)  {
      .el-input-group__append {
        padding: 0 12.5px;
      }
    }
  }
}
</style>
